<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog title="提示" :visible.sync="memFetchDialogVisible" width="70%" :before-close="handleDialogClose">
    <div id="Members-page">
      <!--顶部搜索栏-->
      <div class="col-md-12">
        <el-row :gutter="20">
          <el-col :span="22" :offset="1" class="clearfix">
            <el-form :inline="true" :model="query" class="demo-form-inline">
              <el-form-item label="关键词">
                <el-input v-model="query.key" placeholder="会员ID & 名称 & 手机号" size="small"
                          :clearable="true"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleFetch" class="register_btn" size="small">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!--中部数据表格栏-->
      <div class="col-md-12">
        <el-row :gutter="20">
          <el-col :span="22" :offset="1" class="clearfix">
            <el-table :data="memList"
                      ref="multipleTable"
                      tooltip-effect="dark"
                      :cell-style="{padding:'3px'}"
                      :row-style="{height:'30px'}"
                      :height="tableHeight" :key="isIndex" style="width: 100%" v-loading="isLoading" border stripe
                      @selection-change="handleSelectionChange"
                      row-key="id">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75" fixed></el-table-column>
              <el-table-column fixed prop="status" label="帐号状态" width="90">
                <template v-slot="scope">
                  <el-tag v-if="scope.row.status=='MEM-001'" type="success">已开通</el-tag>
                  <el-tag v-if="scope.row.status=='MEM-002'" type="warning">已停用</el-tag>
                  <el-tag v-if="scope.row.status=='MEM-009'" type="info">已删除</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed prop="uname" label="登录名" width="130"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="level_name" label="会员" width="100"></el-table-column>
              <el-table-column prop="register_time" label="注册时间" width="180"></el-table-column>
              <el-table-column prop="update_date" label="更新时间" width="180"></el-table-column>
            </el-table>
            <!--          <div style="margin-top: 20px">-->
            <!--            <el-button @click="toggleSelection([memList[1], memList[2]])">切换第二、第三行的选中状态</el-button>-->
            <!--            <el-button @click="toggleSelection()">取消选择</el-button>-->
            <!--          </div>-->
          </el-col>
          <el-col :span="22" :offset="1" class="custRow clearfix">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :pager-count=5
                :page-sizes="[20, 50, 100]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-count=10
                :total="query.total">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleDialogClose">取 消</el-button>
      <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {fetch} from "@/api/Member";

export default {
  name: "MemberFetchDialog",
  components: {},
  data() {
    return {
      isIndex: 1,
      isLoading: true,
      memFetchDialogVisible: false,
      currentPage: 1,
      total: 0,
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 440,
      memList: [],
      multipleSelection: []
    }
  },
  props: {
    dialogId: {type: Boolean, default: false}
  },
  computed: {},
  methods: {
    handleFetch() {
      this.isLoading = true;
      fetch(this.query).then(res => {
        let _res = eval(res.data);
        // 刷新页面表格
        this.memList = _res.lists;
        // this.currentPage = _res.currentPage;
        this.query.pageSize = _res.pageSize;
        this.query.total = _res.total;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.handleFetch(this.query);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      this.handleFetch(this.query);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDialogConfirm() {
      if (this.multipleSelection.length <1){
        this.$alert('请选择需要打印计算数据的会员', '标题名称', {
          confirmButtonText: '确定',
          callback: () => {
            return;
          }
        });
      }else{
        this.memFetchDialogVisible = true;
        this.$emit('fMethod', {"viewFlg": true, "choosedMems": this.multipleSelection});
      }
    },
    handleDialogClose() {
      this.memFetchDialogVisible = false;
      this.$emit('fMethod', {"viewFlg": false, "choosedMems": []});
    }
  },
  created() {

  },
  mounted() {
  },
  watch: {
    dialogId: {
      immediate: true,
      handler(dialogId) {
        this.memFetchDialogVisible = dialogId;
        this.handleFetch();
      }
    }
  }
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
</style>